<template>
	<view class="u-wrap">
		<view class="margin-top" v-if="couponList.length>0">
			<view v-for="i in couponList" :key='i.id' class="meituan" :class="{gray:current>0}">
				<view class="content">
					<view class="left">
						<template v-if="i.couponType==1">
							<view class="sum text-center">
								￥
								<text class="num">{{i.couponDiscount}}</text>
							</view>
							<view class="type text-center">抵用券</view>
						</template>
						<template v-else>
							<view class="sum text-center">
								<text class="num">{{i.couponDiscount*10}}</text>
								折
							</view>
							<view class="type text-center">折扣券</view>
						</template>
					</view>
					<view class="center">
						<view class="title">{{i.couponTitle}}</view>
						<view v-if="current==0" class="valid-date">{{i.couponCreateTime.substring(0,10)}} - {{i.couponEndTime.substring(0,10)}}</view>
						<!-- <view v-if="current==0" class="valid-date">{{$u.timeFrom(new Date(i.couponEndTime).getTime()+1000*60*60*24,false) }}到期</view> -->
						<view v-else-if="current==1" class="valid-date">已使用</view>
						<view v-else-if="current==2" class="valid-date">已过期</view>
						<view class="rule u-line-1 text-gray">
							<view>
								<template v-if="i.couponAreaType==1">
									<text class="cu-tag bg-orange round sm">通用</text>
								</template>
								<template v-else-if="i.couponAreaType==2">
									<text class="cu-tag bg-orange round sm">指定酒店</text>
								</template>
								<template v-else-if="i.couponAreaType==3">
									<text class="cu-tag bg-orange round sm">指定地区</text>
								</template>
							</view>
							<view @tap='collapseItemChange(i.id)'>
								<text>使用规则</text>
								<u-icon v-if="collapseItemIndex.indexOf(i.id)==-1" name="arrow-up" color="" :size="20"></u-icon>
								<u-icon v-else name="arrow-down" color="" :size="20"></u-icon>
							</view>
						</view>
					</view>
					<view class="right">
						<view @tap.stop='selectOver(i)' size="mini" v-if="current==0" class="immediate-use" :round="true">立即使用</view>
					</view>
					<view v-if="current==2" class="iconfont icon-yiguoqi"></view>
					<view v-else-if="current==1" class="iconfont icon-yishiyong"></view>
				</view>
				<view class="tips" v-if="collapseItemIndex.indexOf(i.id)!==-1">
					<view class="collapseBody">
						<view v-if="i.couponType==1">
							满{{i.couponBeyond}}元，立减{{i.couponDiscount}}
						</view>
						<view v-else>
							{{i.couponDiscount*10}}折券，满{{i.couponBeyond}}元可用，最多可减{{i.couponDiscountLimit}}元
						</view>
						<view v-if="i.couponAreaType==2">
							仅限{{i.ableHotel}}酒店{{i.ableRoomtype.join(",")}}房型可用,
						</view>
						<view v-else-if="i.couponAreaType==3">
							仅限{{i.couponCity}}地区可用
						</view>
						<view>
							{{i.couponCreateTime}} - {{i.couponEndTime}} 可用
						</view>
						<view v-if="i.unableDate">
							以下时间禁用：
							<text :key='index' v-for="(j,index) in i.unableDate">{{j}},</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore bg-color='#f1f1f1' class="bg-gray" :status="status" @loadmore="loadmore" />
		</view>
		<view v-else style="margin-top: 200rpx;">
			<u-empty text="暂无优惠券" mode="coupon"></u-empty>
		</view>
	</view>
</template>

<script>
import {ableCoupon} from '../../../api/api.js'
export default {
	data(){
		return{
			list:[
				{
					name:"未过期",
				},
				{
					name:"已使用",
				},
				{
					name:"已过期",
				}
			],
			current:0,
			collapseItemIndex:[],
			status:"loadmore",
			couponList:[],
			search:{
				page:1,
				size:10,
				state:1
			}
		}
	},
	onReachBottom(){
		console.log(1);
	},
	onLoad(e) {
		// this.getData();
		ableCoupon(e).then(res=>{
			this.couponList = res.data.map(item=>{
				return{
					...JSON.parse(item.couponInfo),
					...item,
				};
			});
		})
	},
	methods:{
		loadmore(){
			
		},
		getData(){
			uni.showLoading({
				title:"加载中"
			})
			
			this.status='loading';
			consumerCoupon(this.search).then(res=>{
				if(this.page>1){
					let arr = res.data.list.map(item=>{
						return{
							...JSON.parse(item.couponInfo),
							...item,
						};
					});
					this.couponList.concat(arr);
				}else{
					this.couponList=res.data.list.map(item=>{
						return{
							...JSON.parse(item.couponInfo),
							...item,
						};
					})
				}
				if(this.couponList.length>=res.data.total){
					this.status='nomore'
				}else{
					this.status='loadmore';
				}
				uni.hideLoading();
			})
		},
		collapseItemChange(id){
			let index = this.collapseItemIndex.indexOf(id);
			if(index>-1){
				this.collapseItemIndex.splice(index,1);
			}else{
				this.collapseItemIndex.push(id);
			}
		},
		selectOver(id){
			uni.$emit("selectCoupon",id);
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background-color: rgb(244, 244, 244);
}
.u-wrap {
	padding: 24rpx;
}
.gray{
	color: #CCCCCC !important;
	
	.title{
		color: #CCCCCC !important;
	}
	.content{
		position: relative;
	}
	.iconfont{
		position: absolute;
		font-size: 150rpx;
		right: 50rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 100;
	}
}
.meituan {
	margin: 30rpx auto;
	background-color: #ffffff;
	width: 700rpx;
	color: $u-type-warning;
	font-size: 28rpx;
	.content {
		display: flex;
		align-items: center;
		padding: 50rpx 20rpx;
		border: 10rpx;
		height: 220rpx;
		// background-color: #fff5f4;
		.valid-date{
			font-size: 24rpx;
		}
		.left {
			flex-shrink: 0;
			width: 20%;
			.sum {
				font-size: 32rpx;
				.num {
					font-size: 60rpx;
					font-weight: bold;
				}
			}
		}
		.center {
			margin-left: 40rpx;
			width: 60%;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: $u-main-color;
				margin-bottom: 20rpx;
			}
		}
		.right {
			flex-shrink: 0;
			margin-left: 30rpx;
			.immediate-use {
				padding: 0 20rpx;
				height: 50rpx;
				border-radius: 25rpx;
				line-height: 50rpx;
				background-color: $u-type-warning!important;
				color: #ffffff!important;
				font-size: 22rpx;
				border: none;
				word-break: keep-all;
			}
		}
		.rule {
			font-size: 24rpx;
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text {
				margin-right: 10rpx;
				flex: 1;
			}
		}
	}
	.collapseBody{
		font-size: 20rpx;
		&>view{
			line-height: 1rem;
		}
	}
	.tips {
		padding:20rpx;
		border: 10rpx;
		background-color: $u-type-info-light;
		position: relative;
		color: $u-tips-color;
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
		font-size: 24rpx;
		.circle-left,
		.circle-right {
			position: absolute;
			height: 36rpx;
			width: 18rpx;
			background-color: #f2f2f2;
		}

		.circle-right {
			border-radius: 40rpx 0 0 40rpx;
			right: 0;
			top: -18rpx;
		}

		.circle-left {
			border-radius: 0 40rpx 40rpx 0;
			left: 0;
			top: -18rpx;
		}
		
	}
}
</style>
